<template>
    <div class="list">
        <ul class="table bb w1">
            <li class="tr0 flex">
                <span class="td">&nbsp;</span>
                <span class="td">
                    <span v-text="Lang.tableTitle[lang][0]" />
                    <!-- <span>(USDT)</span> -->
                </span>
                <span class="td">
                    <span v-text="Lang.tableTitle[lang][1]" />
                    <!-- <span>(BTC)</span> -->
                </span>
                <span class="td">
                    <span v-text="Lang.tableTitle[lang][2]" />
                </span> 
            </li>
            <!-- 卖出 -->
            <li class="flex bg0 animation" v-for="(value,index) in this.$store.state.trade.listSell" :key="index + '1'">
                <span class="td sell" v-text="Lang.tableTitle[lang][3]+value.jytype" />
                <span class="td" v-text="value.price" />
                <span class="td" v-text="value.leftcount" />
                <span class="td" v-text="value.count" />
            </li>
            <div class="line"></div>
            <!-- 买入 -->
            <li class="flex bg0 animation"
                v-for="(value,index) in this.$store.state.trade.listBuy"
                :key="index">
                <span class="td buy"
                    v-text="Lang.tableTitle[lang][4]+value.jytype" />
                <span class="td"
                    v-text="value.price" />
                <span class="td"
                    v-text="value.leftcount" />
                <span class="td"
                    v-text="value.count" />
            </li>
        </ul>
    </div>
</template>

<script>
import {vpost, kpost, vlink} from '@api'
import Lang from './lang.js'
export default {
	name: 'list',
	data() {
		return {
            Lang,
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
        },
	},
	methods: {
	},
	mounted() {   
	},

	destroyed() {
		clearInterval(this.timing)
	},
}
</script>

<style scoped>
.table {
	flex-grow: 1;
}
.tr0 {
	color: #4e5b85;
}
.td {
	flex-grow: 1;
	line-height: 25px;
	font-size: 13px;
}
.td:nth-of-type(1) {
	width: 80px;
	flex-grow: 0;
	text-align: center;
}
.bg0 {
	color: #c7cce6;
}
.bg0:hover {
	background-color: #4e5b85;
}
.tred {
	color: #ae4e54;
}
.line {
	margin: 5px 0;
	height: 1px;
	background-color: #4e5b85;
}
.sell {
	color: #ae4e54;
}
.buy {
	color: green;
}
</style>

